<template>
  <div class="wrap">
    <div class="bgImg">
      <section class="container">
        <div class="topWarp">
          <!-- 酒店搜索框 -->
          <SearchHotel @searhInfo="data_from_search" />
          <!-- 地图 -->
          <div class="map">
            <MapInMainPage
              v-if="hotel_list.length>0"
              :hotel_list="hotel_list"
              :obj_location_to_map="this.obj_location_to_map"
              :index_map="this.index_map"
            />
          </div>
        </div>
        <!-- 筛选器 -->
        <div class="filter">
          <FliterHotel
            :hotel_list="hotel_list"
            @filter="filtered_data"
            @sendPriceStr="getPriceStr"
          />
        </div>
        <!-- 分页 -->
        <div class="deal_pages">
          <el-pagination
            v-if="hotel_list"
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="totalPage"
            :hide-on-single-page="true"
            @current-change="loadCurrentPage"
            :current-page="pageNow"
          />
        </div>
        <!-- 遍历酒店信息 -->
        <Hotelitem
          v-for="(item,index) in hotel_list"
          :key="index"
          :hotel_info="item"
          @handleClick="handleClick(item.location,index)"
          @handleToDetail="to_detail(index)"
        />
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotel_list: [],
      pageSize: 4,
      totalPage: 1,
      city: "&city=197",
      enterTime: [],
      leftTime: [],
      obj_location_to_map: "",
      index_map: "",
      addUrl: [],
      str_price: [],
      pageNow: 1,
    };
  },
  created() {
    this.$message("当前定位广州市");
    this.loadCurrentPage(1);
  },

  methods: {
    to_detail(index) {
      console.log(this.hotel_list);
      this.$router.push({
        path: "/hotel/detail",
        query: {
          id: this.hotel_list[index].id,
        },
      });
    },

    handleClick(location, index) {
      // console.log(index);
      this.obj_location_to_map = location;
      this.index_map = index;
    },
    loadCurrentPage(pageIndex) {
      this.pageNow = pageIndex;
      this.$axios({
        url:
          "/hotels?_limit=" +
          this.pageSize +
          "&_start=" +
          (pageIndex - 1) * this.pageSize +
          this.city +
          this.enterTime +
          this.leftTime +
          this.addUrl +
          this.str_price,
      }).then((res) => {
        this.totalPage = res.data.total;
        this.hotel_list = res.data.data;
      });
    },
    data_from_search(data_from_search) {
      this.city = "&city=" + data_from_search.city;
      this.enterTime = "&enterTime=" + data_from_search.enterTime;
      this.leftTime = "&leftTime=" + data_from_search.leftTime;

      this.loadCurrentPage(1);
    },
    //得到过滤后的列表
    filtered_data(data) {
      this.addUrl = data;
      //:current-page="pageNow" 本质上组件内部是会监听发生变化的pageNow, 如果没有让pageNow处于变动, 也不会跳回第一页
      this.pageNow = 1;
      this.loadCurrentPage(1);
    },
    getPriceStr(str_slider) {
      this.str_price = str_slider;
      this.loadCurrentPage(1);
      this.pageNow = 1;
    },
  },
};
</script>

<style lang="less" scoped>
.bgImg {
  width: 100%;

  .container {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
  }
}
.deal_pages {
  height: 50px;
  text-align: center;
}
.filter {
  position: sticky;
  top: 20%;
}
section {
  .topWarp {
    display: flex;
    justify-content: space-between;
    .map {
      overflow: hidden;
      margin-top: 0;
      width: 900px;
      height: 320px;
      padding-left: 40px;
    }
  }
}
</style>